<template>
  <div
    class="m-button-group"
    :class="[
        align ? 'm-button-group--' + align : '',
        isFixed ? 'm-button-group--fixed' : ''
     ]"
  >
    <slot />
  </div>
</template>

<script>
export default {
  name: "ButtonGroup",
  props: {
    align: {
      type: String,
      default: "left"
    },
    isFixed: {
      type: Boolean,
      default: false
    }
  }
};
</script>

<style scoped lang="scss">
.m-button-group {
  &--left {
    text-align: left;
  }
  &--center {
    text-align: center;
  }
  &--right {
    text-align: right;
  }
  &--fixed {
    padding: 12px 20px;
    background: #fff;
    border-top: 3px #f5f5f5 solid;
  }
  .m-button + .m-button {
    margin-left: 10px;
  }
}
</style>